<#assign ctx=request.contextPath />
<!DOCTYPE html>
<html>
<head>
  <base id="ctx" href="${ctx}">
  <meta charset="UTF-8">
  <title>楼宇管理</title>
  <link rel="stylesheet" href="${ctx}/css/datacenter/community/houstList.css" />
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" />
</head>
<body>
<div class="header">
  <div class="permission">
    <h1>楼宇列表</h1>
  </div>
  <div class="show">
    <div class="manage">
      <a class="layui-btn  add" >添加</a>
      <a class="layui-btn   del">删除</a>
    </div>
    <div class="demoTable" style="margin-left: 80%;">
      搜索ID：
      <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
      </div>
      <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <table id="demo" lay-filter="test"></table>
    <script src="${ctx}/layui/layui.js"></script>
    <script src="${ctx}/layui/layui.all.js" ></script>
    <script>
        layui.use('table', function() {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: "#demo",
                url: '',
                page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    ,
                    groups: 1 //只显示 1 个连续页码
                    ,
                    first: false //不显示首页
                    ,
                    last: false //不显示尾页
                },
                cols: [
                    [{
                        field: "id",
                        title: 'id'
                    },
                        {
                            field: "name",
                            title: '小区名称'
                        },
                        {
                            field: "address",
                            title: '所在地区'
                        },
                        {
                            field: "detailaddress",
                            title: '详细地址'
                        },
                        {
                            field: "servicetel",
                            title: '服务热线'
                        },
                        {
                            field: "leader",
                            title: '负责人'
                        },
                        {
                            field: "leaderphone",
                            title: '负责电话'
                        },
                        {
                            field: "logo",
                            title: '小区Logo'
                        },

                        {
                            field: "backgroundimage",
                            title: '背景图片'
                        },
                        {
                            field: "right",
                            title: '编辑',
                            align: 'center',
                            toolbar: "#barDemo"
                        }
                    ]
                ],
                page: true
            });
            //删除
            table.on('tool(test)', function(obj) {
                var data = obj.data; //获得当前行数据
                console.log(data.id+1);
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                console.log(layEvent);
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                console.log(tr);
                if(layEvent === 'del') {
                    layer.confirm('确定要删除吗?', {
                        icon: 3,
                        title: '提示',
                        shade: '0'
                    }, function(index) {
                        $.ajax({
                            url: '',
                            type: 'get',
                            dataType: 'json',
                            data: {
                                id: data.id
                            },
                            success: function(data) {
                                if(data == 1) {
                                    layer.msg('删除成功', {
                                        icon: 1
                                    });
                                    obj.del();
                                    layer.close(index);
                                } else {
                                    layer.msg('删除失败', {
                                        icon: 2
                                    });
                                }
                            }
                        })
                    });
                }
            });
        });
    </script>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </script>
  </div>
</div>
</body>

</html>